<?php include_once 'header.php'; ?>
<div id="middle" class="diamond-background">

    <div class="right-sidebar-white">
        <div class="sidebar-header text-center">
            <a href="#">All</a>
            <a href="#" class="active">Trends</a>
            <a href="#">Products</a>
            <a href="#">Brands</a>
        </div>

        <div class="siderbar-middle">
            <p class="searchtools-text">Search/Tools</p>
            <p><input type="text" placeholder="Start typing..."/></p>
        </div>

        <div class="sidebar-footer text-right">
            <p><a href="#" class="active">SHOPPING CART (1 item)</a></p>
        </div>
    </div>

    <div class="diamond-logo-description">
        <img src="<?php echo IMAGES_PATH; ?>/diamond-supply-co.jpg" alt="image" class="logo-image"/>
    </div>

    <div class="product-detail-grid-block products-scroller isotope" style="padding-top: 0; height:100%;position:relative;overflow: hidden;">


        <div class="product-left-section" style="margin-right: 20px;">
            <div class="product-and-scroller text-center">
                <img src="<?php echo IMAGES_PATH; ?>/product.jpg" alt="image" class="main"/>
                <img src="<?php echo IMAGES_PATH; ?>/product-scroller.jpg" alt="image" class="scroller"/>
            </div>

            <div class="pull-right margin-top-40">
                <!-- AddThis Button BEGIN -->
                <div class="addthis_toolbox addthis_default_style ">
                    <a class="addthis_button_preferred_1"></a>
                    <a class="addthis_button_preferred_2"></a>
                    <a class="addthis_button_preferred_3"></a>
                    <a class="addthis_button_preferred_4"></a>
                    <a class="addthis_button_compact"></a>
                    <a class="addthis_counter addthis_bubble_style"></a>
                </div>
                <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-525124772e13082f"></script>
                <!-- AddThis Button END -->
            </div>
        </div>

        <div class="product-middle-section">
            <p class="product-title">Product Title</p>
            <p class="review-text">
                <span class="raty" data-score="0" style="vertical-align: text-bottom;"></span>
                6 Review(s) | <a href="#" class="colorbox-html-onClass-relContent" rel="reviewDiv" style="color: #969DA5;">Add your review</a></p>

            <div class="availability-section">
                <p><span class="info-title">Availability:</span><span class="color-orange">Instock</span></p>
                <p><span class="info-title">Product Code:</span>123456</p>

                <hr/>

                <p class="product-desc-title">Product Description</p>
                <p class="product-desc-text">This is the product description text and this is going to be a little longer than this.</p>

                <hr/>

                <p class="price-text">$144.00</p>

                <div class="cart-options">
                    <p>Quantity:</p>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default prod-quant-dec-btn">-</button>
                        <input type="text" class="btn btn-default prod-quant-input" value="1"/>
                        <button type="button" class="btn btn-default prod-quant-inc-btn">+</button>
                    </div>

                    <p style="margin-left: 30px;">Color:</p>
                    <div class="colors">
                        <span style="background-color: red;" class="active"></span>
                        <span style="background-color: blue;"></span>
                    </div>

                    <br/>

                    <p>Size:</p>
                    <select class="size-select">
                        <option>Small</option>
                        <option>Medium</option>
                        <option>Large</option>
                    </select>

                    <br/>
                    <br/>

                    <a href="#" class="add-to-cart">Add to cart</a>

                </div>
            </div>

        </div>

        <div class="product-right-section">
            <p class="title">Features</p>
            <p>Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. </p>
            <br/>
            <p>Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. </p>
            <br/>
            <p>Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. Long Long text about the features of the product. </p>
        </div>


        <div id="whats-new">
            <div class="use-scroller brands-features">
                <div class="scroller-wrap">
                    <h2 class="brands-features-title">Brands Features</h2>
                    <ul class="brands-fearures-boxes-wrap">
                        <li class="brands-features-box">
                            <div class="left-part pull-left">
                                <img src="<?php echo IMAGES_PATH ?>/feature-1.jpg">
                            </div>
                            <div class="right-part pull-right">
                                <p style="margin:10px 0 0 0;">Brand Name</p>
                                <p style="margin:0">Men's Black Suit</p>
                                <br>
                                <a  class="color-orange" href="#">SHOP NOW ></a>
                            </div>
                        </li> 
                        <li class="brands-features-box">
                            <div class="left-part pull-left">
                                <img src="<?php echo IMAGES_PATH ?>/feature-1.jpg">
                            </div>
                            <div class="right-part pull-right">
                                <p style="margin:10px 0 0 0;">Brand Name</p>
                                <p style="margin:0">Men's Black Suit</p>
                                <br>
                                <a  class="color-orange" href="#">SHOP NOW ></a>
                            </div>
                        </li> 
                        <li class="brands-features-box">
                            <div class="left-part pull-left">
                                <img src="<?php echo IMAGES_PATH ?>/feature-1.jpg">
                            </div>
                            <div class="right-part pull-right">
                                <p style="margin:10px 0 0 0;">Brand Name</p>
                                <p style="margin:0">Men's Black Suit</p>
                                <br>
                                <a  class="color-orange" href="#">SHOP NOW ></a>
                            </div>
                        </li> 
                        <li class="brands-features-box">
                            <div class="left-part pull-left">
                                <img src="<?php echo IMAGES_PATH ?>/feature-1.jpg">
                            </div>
                            <div class="right-part pull-right">
                                <p style="margin:10px 0 0 0;">Brand Name</p>
                                <p style="margin:0">Men's Black Suit</p>
                                <br>
                                <a  class="color-orange" href="#">SHOP NOW ></a>
                            </div>
                        </li> 
                        <li class="brands-features-box">
                            <div class="left-part pull-left">
                                <img src="<?php echo IMAGES_PATH ?>/feature-1.jpg">
                            </div>
                            <div class="right-part pull-right">
                                <p style="margin:10px 0 0 0;">Brand Name</p>
                                <p style="margin:0">Men's Black Suit</p>
                                <br>
                                <a  class="color-orange" href="#">SHOP NOW ></a>
                            </div>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="reviewDiv hide">
        <div class="popup-review-box">
            <h2>Write A Review</h2>
            
            <div>
                <p><span class="color-orange number">1. </span>What do you think about this item?</p>
                <p><div class="raty" data-score="0" style="margin-left: 25px;"></div></p>
                <p><span class="color-orange number">2. </span>What do you think about this item (Comment)?</p>
                <p><textarea placeholder="Write review here" rows="5"></textarea></p>
                <p><button type="submit" class="btn btn-orange">SUBMIT REVIEW</button></p>
            </div>
            
        </div>
    </div>

</div>
<?php include_once 'footer.php'; ?>
